<template>
	<view class="zh-u-number-box display-flex align-center">
		<view class="reduce" :style="stepStyle" @click="reduce">
			<text :class="stepTextStyle">-</text>
		</view>
		<view class="number-box display-flex justify-between align-center" :style="numberBoxStyle">
			<input class="number-box-input flex" type="digit" :style="inputStyle" v-model="message" @input="onInput" @change="onChange"/>
			<text v-show="props.unit" class="font-28">{{ props.unit }}</text>
		</view>
		<view class="add" :style="stepStyle" @click="add">
			<text :class="stepTextStyle">+</text>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, watch, computed, nextTick } from 'vue'
	import { util, tip } from '@/utils'
	
	
	const message:any = ref('')
	const emit = defineEmits(['update:modelValue', 'change'])
	const props = withDefaults(defineProps<{
		unit?: string
		color?: string
		radiusSize?: string
		size: string
		width?: string
		digit?:number
		modelValue:number | string
		rules:any
	}>(), {
		unit:'',
		color:'#DCDCDC',
		radiusSize:'8',
		size:'26',
		width:'220',
	})
	
	message.value = props.modelValue
	watch(() => props.modelValue, (value:any) => {
		onChange()
		message.value = value
	})
	
	const numberBoxStyle = {
		'border-bottom':`1rpx solid ${props.color}`,
		'border-top':`1rpx solid ${props.color}`,
		'height':uni.upx2px(Number(props.size))  + 'px',
		'line-height':uni.upx2px(Number(props.size)) + 'px',
		'width': uni.upx2px(Number(props.width))  + 'px'
	}
	
	const inputStyle = {
		'width': uni.upx2px(Number(props.width))  + 'px',
	}
	
	const stepStyle = {
		'width':uni.upx2px(Number(props.size)) + 'px',
		'height':uni.upx2px(Number(props.size)) + 'px',
		'line-height':uni.upx2px(Number(props.size)) + 'px',
		'border':`1rpx solid ${props.color}`,
		'border-radius':`${uni.upx2px(Number(props.radiusSize)) } 0px 0px ${uni.upx2px(Number(props.radiusSize))}`
	}
	
	const stepTextStyle = {
		'font-size': uni.upx2px(Number(props.size))  + 'px'
	}
	
	
	const reduce = () => {
		if(message.value < 1) return 
		message.value = Number((Number(message.value) - 1).toFixed(props.digit))
		emit('update:modelValue', message.value)
	}
	
	const add = ()  => {
		let isFlag = false
		if(props.rules) {
			props.rules.forEach((item:any) => {
				if(item.max && (Number(message.value) + 1) > item.max) {
					isFlag = true
					return tip.showToast(item.message)
				}
			})	
		}
		if(!isFlag) {
			message.value = Number((Number(message.value) + 1).toFixed(props.digit))
		}
		emit('update:modelValue', message.value)
		
	}
	
	const onInput = (e: any) => {
		let value = ''
		//#ifdef MP-WEIXIN
		value = e.target.value
		//#endif
		//#ifdef APP-PLUS
		value = e.detail.value
		if(Number(value) < 0 || value === '-0') {
			value = Math.abs(Number(value)).toString()
		}
		value=(value+'').replace(/^0+\./g,'0.')
		value.match(/^0+[0-9]+/)?value=value.replace(/^0+/g,''):value

		//#endif
		if(props.digit) {
			value = util.inputDigit(value, props.digit)
		}
		nextTick(() => {
			message.value = value
		})
		if(props.rules) {
			props.rules.forEach((item:any) => {
				if(item.max && value > item.max) {
					tip.showToast(item.message)
				}
			})	
		}
		emit('update:modelValue', value)
	}
	
	const onChange = () => {
		emit('change')
	}
	
</script>

<style lang="scss" scoped>
.zh-u-number-box {
	
	.reduce, .add {
		text-align:center;
	}
	.number-box {
		padding:0 17rpx;
		.number-box-input {
			font-size:24rpx;
		}
	}
}
</style>
